<template>
  <div class="Echarts">
    <div id="tubiao1" style="width:400px; height:210px; "></div>
  </div>
</template>
<script>
  export default {
    mounted() {
      console.log(this.data, this.total);
      this.myEcharts()
    },
    props: {
      data: {
        type: [String, Array],
        required: true
      },
      total: {
        type: [String, Number],
        required: true
      }
    },
    methods: {
      myEcharts(){
        // let myColor = ['#0088FF','#FACD91','#F958C3','#F958C3','#4719C6','#5B7082'];
        let myColor = ['#9B6AE2','#D2DCF9','#30CDFF','#1D96FC', '#E5BC8D', '#D5A4E2','#42E5F8','#7EFFA5','#FFFB95','#6D99FF','#6087AA','#3BD87F']
        
				// let dataList1 = [1976, 156,130,130,104,78];
				// let dataTitle = ['日本', '韩国','中国','法国','德国','其他'];
				// let total=eval(dataList1.join("+"))
				let dataSeries1 = [];
				let resObj = {};
				// dataList1.forEach((item, index) => {
				// 	dataSeries1.push({
				// 		value: item,
				// 		name: dataTitle[index]
				// 	})
				// })
        dataSeries1 = this.data
        let total = this.total
				for (let i in dataSeries1) {
					resObj[dataSeries1[i]["name"]] = dataSeries1[i];
				}
        // console.log(resObj, dataSeries1);

        let myChart = this.$echarts.init(document.getElementById('tubiao1'));
        var option = {
          tooltip: {
            trigger: 'item',
            backgroundColor: "#031026",
						borderColor: "#031026",
            formatter:function(params){
              return params.marker+`<span style=color:#04CDF4;fontSize:15;fontWeight:900>${params.name}</span><br/>
              <span style=color:#E0EDF9;fontSize:15;fontWeight:bold>数量：</span>
              <span style=color:#04CDF4;fontSize:15;fontWeight:bold>${params.value}</span><br>
              <span style=color:#E0EDF9;fontSize:15;fontWeight:bold>占比：</span>
              <span style=color:#04CDF4;fontSize:15;fontWeight:bold>${(params.percent).toFixed(0)}%</span>`
            },
            textStyle: {
              rich:{
              aaa:{
                color: '#04CDF4',
                fontSize: 15,
                fontWeight: 'bold'
              }
            }
            }
            
          },
          color:myColor,
          title: [
          {
              // text: '钕铁硼\n材料行业',
              x: '24%',
              top: '35%',
              textAlign: 'center',
              textStyle: {
                color: '#C1E2FF',
                fontSize: 18,
                lineHeight: 22,
                fontWeight: 'bold',
              },
          }],
          legend: {
            type : 'scroll',
            pageIconSize: 10,
            pageButtonItemGap: 10,
            pageButtonGap: 10,
            pageFormatter: '{current}',
            pageIcons: {
              vertical: ['image://images/jinghe/right/icon00.png','image://images/jinghe/right/icon11.png']
            },
            pageTextStyle: {
              color: '#fff',
              fontSize:  12,
              lineHeight:  20
            },
            show: true,
            icon: "circle",
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 16,
            orient: 'vertical', // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
            top:'10%',
            left: '44%',
            textStyle: {
              color: "#FFFFFF",
              fontSize: 16,
              borderWidth:0,
              rich:{
                aaa:{
                  color:'#FFFFFF',
                  fontSize: 16,
                  width: 70,
                },
                bbb:{
                  color:'#00DCFF',
                  fontSize: 15,
                  width: 50,
                },
                ccc:{
                  color:'#E0EDF9',
                  fontSize: 15,
                  width: 40,
                }
              }
            },
            formatter: function(name) {
              return "{aaa|"+name +"}"+"{bbb|"+((resObj[name].value/total)* 100).toFixed(0)+'%'+"}" +"{ccc|"+resObj[name].value+'所'+"}"
            }
          },
          series: [{
            name: '',
            type: 'pie',
            radius: ['0%', '60%'],
            center: ['20%', '50%'],
            // radius: ['34%', '50%'],
            // center: ['12%', '50%'],
            avoidLabelOverlap: false,
            // hoverAnimation:false,
            itemStyle: {
              borderColor: '#031026',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'outside',
              formatter: '{b}\n{d}%',
              color: '#CAD5E6',
              fontSize: 12,
              lineHeight: 17,
              borderWidth: 0,
              // padding: [-10,-23,0,0]
              padding:[0,-50,0,-50],
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false,
              showAbove: false,
              length: 12,
              length2: 50
            },
            data: dataSeries1
          }]
        }
        myChart.clear()
        myChart.setOption(option)
      }
    },
    watch: {
      data: function(){
        this.myEcharts()
      }
    }
  }
</script>